/*
   ____   __
  / __'\ /\'\      ______   ______   ______ TM
 /\ \Z\ \\ \ \    /\  __'\ /\  __'\ /\  __'\
 \ \  __ \\ \ \___\ \ \Z\ \\ \ \Z\ \\ \ \Z\ \
  \ \_\ \ \\ \____\\ \_____\\ \_\ \_\\ \____ \
   \/_/\/_/ \/____/ \/_____/ \/_/\/_/ \/___Z\ \
                                        /\_____\
                        http://dlog.org \/_____/
*/
/**************************************************
	@name		template.js
	@author:	Along Bao
	@email:		AlongBao@gmail.com
	@website:	http://dlog.org/
**************************************************/
var sences = {
	'001':{
		'first':'001_1.png',
		'second':'001_2.png',
		'third':'001_3.png',
		'fourth':'001_4.png'
	},
	'002':{
		'first':'002_1.png',
		'second':'002_2.png',
		'third':'002_3.png',
		'fourth':'002_4.png'
	},
	'003':{
		'first':'003_1.png',
		'second':'003_2.png',
		'third':'003_3.png',
		'fourth':'003_4.png'
	}
}
var a1=['first','second','third','fourth']
//var root=['assets/sence/','assets/role/','assets/bubble/']
function drawComicBack( no ) {

	for (var i=0; i<a1.length; i++) {
		var canvas = document.getElementById(a1[i]+'_scene');
		//alert(canvas[i].id)
		var context = canvas.getContext('2d');
		var bk = new Image();
		bk.src="assets/sences/"+sences[no][a1[i]];
		//bk.onload = function(){
			context.save();
			context.drawImage(bk, 0, 0);
			context.fill();
			context.restore();
		//}
	}
}


function drawComicDialog(n,str,fsize,fcolor){
	//alert(n)
	//alert(a1[n])
	var canvas1 = document.getElementById(a1[n]+'_text');
	var context = canvas1.getContext('2d');
	context.clearRect(0, 0, canvas1.width, canvas1.height);   
	context.font = "bold "+fsize+"px microsoft yahei";
	context.fillStyle =  fcolor;
	context.fillText(str, 30, 20, 180);
}
function todo(n) {
	var senceList = document.getElementById("sence_list");
	var senceLists = senceList.querySelectorAll('li');
	drawComicBack(n)
	current(senceLists[n])
}

var dialogs=document.getElementById('dialogs');
var textareas = dialogs.getElementsByTagName('textarea');

function doText(n) {
	var fsize = document.getElementById("font_size").value;
	var fcolor = document.getElementById("font_color").value;
	//alert(fsize)
	//alert(fcolor)
	drawComicDialog(n,textareas[n].value,fsize,fcolor);
	//console.log(this.value)
}
function current(n) {
	
	var senceList = document.getElementById("sence_list");
	var senceLists = senceList.querySelectorAll('li');
	for(var i=0,l=senceLists.length;i<=l;i++){
		senceLists[i].className=""
	}
	senceLists[n].className="current";
	alert(0)
}
function Comican() {
	var senceList = document.getElementById("sence_list");
	var senceLists = senceList.querySelectorAll('li');

	for(var i=0,l=senceLists.length;i<=l;i++){
		//senceLists[i].onclick=function(){
			//alert(1)
		//}
	}
	
	for(var i=0;i<textareas.length;i++){
		bindEvent(i)
	}
	function bindEvent (i) {
		textareas[i].addEventListener('keyup',function(){doText(i)});
	}
	
	//document.getElementById('')
	todo("001");
	current(senceLists[0])
}